<template>
  <div class="box">
    <BlueBox2 class="boxA" :stylecolor="fontColor" :titleCar="titleinto" :carNum="tocarNum" :jytcarNum="jyttocarNum"/>
    <BlueBox2 class="boxB" :stylecolor="fontColor" :titleCar="titileout" :carNum="outcarNum" :jytcarNum="jytoutcarNum"/>
  </div>
</template>

<script>
import BlueBox2 from "components/blueBox2";
import { mapState } from "vuex";
export default {
  name:"vehicleCom",
  components: {
    BlueBox2,
  },
  data() {
    return {
      fontColor: {
        color: "rgb(247, 248, 149)",
      },
      titleinto:"今日入园车辆",
      titileout:"今日出园车辆",
      tocarNum:0,
      outcarNum:0,
      jyttocarNum:0,
      jytoutcarNum:0
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState({
      peoCount: (state) => state.winconcrol.socketMessage, //这是mapState的使用方式
    }),
  },
  watch: {
    peoCount(n, o) {
      const { source } = n;
  
      if (source == 1000) {
        const {
          in_car_num = 0,
          out_car_num = 0,
          compare_ytd_in_car_num =0,
          compare_ytd_out_car_num =0
        } = n;
      this.tocarNum=in_car_num;
      this.outcarNum=out_car_num;
      this.jyttocarNum=compare_ytd_in_car_num;
      this.jytoutcarNum=compare_ytd_out_car_num
      }
    },
  },
  methods: {
    peoCount1() {
      const { source } = this.peoCount;
      if (source == 1000) {
        const {
          in_car_num = 0,
          out_car_num = 0,
          compare_ytd_in_car_num =0,
          compare_ytd_out_car_num =0
        } = this.peoCount;
      this.tocarNum=in_car_num;
      this.outcarNum=out_car_num;
      this.jyttocarNum=compare_ytd_in_car_num;
      this.jytoutcarNum=compare_ytd_out_car_num
      }
    },
  },
  mounted() {
    this.peoCount1();
  },
};
</script>
<style lang="less" scoped>
.box {
  display: flex;
  justify-content: space-between;
  padding: 0.78vw 0 0.94vw 0;
}
</style>
